import React, { Component } from 'react'

import './login.scss'

export default class Login extends Component {
  state = {
    phone: '',
    checkCode: '',
    agreeItems: true,
    errMsg: ''
  }

  // handlePhone = (e)=> {
  //   this.setState({
  //     phone: e.target.value
  //   })
  // }

  // handleCheckCode = (e)=> {
  //   this.setState({
  //     checkCode: e.target.value
  //   })
  // }

  // handleAgreeItems = (e) => {
  //   this.setState({
  //     agreeItems: e.target.checked
  //   })
  // }

  handleChange = (e)=> {
    // console.log(e.target.dataset)
    // if(e.target.dataset.type === 'checkbox') {
    //   this.setState({
    //     agreeItems: e.target.checked
    //   })
    // } else {
    //   this.setState({
    //     [e.target.dataset.key]: e.target.value
    //   })
    // }
    let { type, key } = e.target.dataset
    if(type === 'checkbox') {
      var value = e.target.checked
    } else {
      var value = e.target.value
    }
    this.setState({
      [key]: value
    })
  }

  validatePhone = ()=> {
    let phone = this.state.phone
    if (!phone) {
      this.setState({
        errMsg: '手机号不能为空'
      })
      return false
    }
    if(!/^1[0-9]{10}$/.test(phone)) {
      this.setState({
        errMsg: '手机号码格式不正确'
      })
      return false
    } else {
      this.setState({
        errMsg: ''
      })
      return true
    }
  }

  validateAgreeItems = ()=> {
    let agree = this.state.agreeItems
    if(!agree) {
      this.setState({
        errMsg: '请勾选同意《服务条款》再尝试登录'
      })
      return false
    } else {
      return true
    }
  }

  handleSubmit = (e)=> {
    let flag2 = this.validatePhone()
    let flag1 = this.validateAgreeItems()
    // console.log(flag1, flag2)
    if(flag1 && flag2){
      console.log('调接口')
    }else{
      e.preventDefault()
    }
  }

  handleGetCheckCode = (e)=> {
    e.preventDefault()
  }

  render() {
    return (
      <div className='app-login'>
        <form action='#'>
          <div className="login-phone">
            <input type="text" 
            placeholder='请输入手机号' 
            value={this.state.phone} 
            onChange={this.handleChange}
            data-type='text'
            data-key='phone'
            onBlur={this.validatePhone} />
          </div>
          <div className="login-checkCode">
            <input type="text" 
            maxLength='6' 
            placeholder='请输入短信验证码' 
            value={this.state.checkCode} 
            onChange={this.handleChange}
            data-type='text'
            data-key='checkCode' />
            <button className='login-getCheckCode' onClick={this.handleGetCheckCode}>
              获取验证码
            </button>
          </div>
          <div className='error'>{this.state.errMsg}</div>
          <div className='login-msg'>
            <div className="login-meetProblem">
              <a>遇到问题？</a>
            </div>
            <div className="login-usePassword">
              <a>使用密码验证登录</a>
            </div>
          </div>
          <div className="login-submit">
            <button onClick={this.handleSubmit}>登录</button>
          </div>
        </form>
        <div className="login-agree-items">
          <input type="checkbox" 
          checked={this.state.agreeItems} 
          onChange={this.handleChange} 
          data-type='checkbox'
          data-key='agreeItems' />
          我同意
          <a>《服务条款》</a>
          和
          <a>《网易隐私政策》</a>
        </div>
      </div>
    )
  }
}
